<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.min.js"></script>
</head>
<body>
<h2>自定义组件</h2>
<div class="cls">
    <form>
        <my-input label="用户名"></my-input>
        <my-input label="密码"></my-input>
        <my-input label="邮箱地址"></my-input>
    </form>
    <hr>
    <my-tabs :items="tabs"></my-tabs>
</div>
<script>
    // 定义组件, 在vue对象创建之前, 组件名 和 属性 不能使用驼峰命名法
    // 第二个参数内部元素, 与 vue 对象的内部元素基本相同
    Vue.component( "my-input" , {
        // 定义组件内部元素(html), 必须有一个唯一的根标签
        template : `
            <div>
                <label :style="{width: width+'px'}" style="display: inline-block">{{label}}</label>:
                <input>
            </div>
        `,
        // 自定义的组件属性
        props : ["label"],
        // 组件中 data 必须是一个函数, 返回 json 数据
        data(){
            return {
                width : 100
            }
        }
    });

    Vue.component("my-tabs" ,{
        props : [
            "items" // [ { title:'..', content:'...' }, { title:'..', content:'...' }  ]
        ],
        data(){
            return { current : "" }  // 当前打开tab 的title
        },
        created(){
            // 默认打开第一个 tab
            this.current = this.items[0].title;
        },
        computed:{
            // 计算属性 使用的时候不是函数 ==> 当前的 tab (item) 对象
            currentTab(){
                a = (item) => {
                    // this 要求必须使用 箭头函数
                    return item.title == this.current;
                }
                let tab = this.items.find( a );
                return tab;
            }
        },
        template: `
            <div>
                <div>
                    <span v-for=" tab in items "
                        @click="current = tab.title"
                        style="padding: 0px 5px; margin: 3px; cursor:pointer;"
                        :style="{backgroundColor: tab.title == current ? '#ddd':'#eee'}">
                        {{tab.title}}
                    </span>
                </div>
                <div v-if="currentTab.type=='html'" v-html="currentTab.content"
                    style="height: 500px; background-color: #ddd">
                </div>
                <div v-else-if="currentTab.type=='href'">
                    <iframe :src="currentTab.content" style="width:100%;height:100%;border:0px"></iframe>
                </div>
                <div v-else style="height: 500px; background-color: #ddd">
                    {{ currentTab.content }}
                </div>
            </div>
        `,
    })
    // iframe 页面内部嵌入其他页面的标签
    // items.find( item=>item.title==current ) 查找title等于 current 的 tab 对象
    // .content 输出tab 的内容

    var v = new Vue({
        el : ".cls",
        data : {
            tabs : [
                {title : "用户管理", type:"html", content:"<h1 style='margin-top: 0px'>用户管理的内容</h1>"},
                {title : "部门管理", type:"text", content:"部门管理的内容"},
                {title : "商品管理", type:"href", content:"Vue事件监听.html"},
                {title : "淘宝", type:"href", content:"http://taobao.com"}
            ]
        }
    })
</script>
</body>
</html>